import React,{Component} from 'react'
import store from './store';
import {getInputChangeAction,getAddItemAction,getDeleteItemAction, getTodoList} from './store/actionCreator'
import TodoListUI from './TodoListUI'
import 'antd/dist/antd.css'; 
// import axios from 'axios'

class TodoList extends Component{
    constructor(props){
        super(props);
        this.state = store.getState()
        console.log(store.getState())
        this.handleInputChange = this.handleInputChange.bind(this)
        this.handleStoreChange = this.handleStoreChange.bind(this)
        this.handleClick = this.handleClick.bind(this)
        this.handleItemDelete =this.handleItemDelete.bind(this)
        //store变化(更新)后执行
        store.subscribe(this.handleStoreChange)
    }
    render(){
        return (
            <TodoListUI 
                inputValue={this.state.inputValue}
                handleInputChange={this.handleInputChange}
                handleClick={this.handleClick}
                list={this.state.list}
                handleItemDelete={this.handleItemDelete}
            />
        )
    }
// Ajax
componentDidMount(){
    // axios.get('data.json').then((res)=>{
    //     //console.log(res.data);
    //     const data = res.data;
    //需要引入initListAction 见UI
    //     const action = initListAction(data)
    //     store.dispatch(action)
    // }).catch((error)=>{
    //     console.log(error)
    // })

    const action = getTodoList()
    //console.log(action)
    store.dispatch(action)
}

    handleStoreChange(){
        //更新store.getState()值替换state里的数据
        this.setState(store.getState())
    }
   
    handleInputChange(e){      
        const action = getInputChangeAction(e.target.value)
        store.dispatch(action)
    }

    handleClick(){
        const action = getAddItemAction()
        store.dispatch(action)
    }

    handleItemDelete(index){
        console.log(index)
        const action = getDeleteItemAction(index)
        store.dispatch(action)
    }
}

export default TodoList;